<script setup>
import { computed, reactive, ref } from "vue";

const n = ref(100);
const newN = computed(() => (n.value += 100));

const color = reactive([
  { name: "红色", check: false },
  { name: "蓝色", check: false },
  { name: "绿色", check: false },
  { name: "黄色", check: false },
  { name: "橙色", check: false },
]);
const checkNum = computed(() => color.filter((v) => v.check).length);

const city = reactive([
  { name: "北京", check: false },
  { name: "上海", check: false },
  { name: "天津", check: false },
  { name: "石家庄", check: false },
  { name: "河北", check: false },
]);
const checkCity = computed(() => city.filter((v) => v.check).length);

const checkNumComputed = computed(() => (data) => data.filter((v) => v.check).length);
</script>

<template>
  <h1>{{ n }}</h1>
  <h1>{{ newN }}</h1>
  <button @click="change">click</button>

  <h1>选中的数量：{{ checkNumComputed(color) }}</h1>
  <ul>
    <li v-for="(v, i) in color" :key="i">
      <input type="checkbox" v-model="v.check" />
      <span>{{ v.name }}</span>
    </li>
  </ul>

  <h1>选择的城市：{{ checkNumComputed(city) }}</h1>
  <ul>
    <li v-for="(v, i) in city" :key="i">
      <input type="checkbox" v-model="v.check" />
      <span>{{ v.name }}</span>
    </li>
  </ul>
</template>

<style scoped>
ul,
li {
  padding: 0;
  margin: 0;
}

.tab-tit li {
  padding: 10px 15px;
  text-align: center;
  list-style: none;
  cursor: pointer;
  display: inline-block;
}

.tab-tit .active {
  color: #f60;
  border-bottom: 2px solid #f60;
  background-color: #fae264;
  border-radius: 10px 0;
}

.tab-con div {
  margin: 30px;
}
</style>
